import style from './index.module.scss';
import {Button, Form, Input, Select, DatePicker} from 'antd';
import React, {useState} from 'react';
import {useNavigate} from 'react-router-dom'
import store from "../../../store/index"
import {observer} from 'mobx-react'
const { Option } = Select;

const CouponQuery = () => {
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const [validityTime1, setValidityTime1]=useState()
    //新增优惠券管理
    const addCoupon = ()=>{navigate('/home/CouponManagement/addCoupon')};
    const submit = (values) => {
        console.log("00",values)
        store.coupon.queryCoupon(values)
    };
    // 编辑表单提交
    const onFinish = (values) => {
        console.log('Success:', values);
        const obj={}
        for(let key in values){
            if(values[key]){
                obj[key]=values[key].trim()
            }
        }
        console.log("22",obj)
        submit(obj)
    };

    // 删除
    const delCoupon = ()=>{
        store.coupon.delCoupon()
    }
    //时间选择器的数据处理
    const range = (start, end) => {
        const result = [];
        for (let i = start; i < end; i++) {
            result.push(i);
        }
        return result;
    };
    const disabledDateTime = () => ({
        disabledHours: () => range(0, 24).splice(4, 20),
        disabledMinutes: () => range(30, 60),
        disabledSeconds: () => [55, 56],
    });
    return (<div>
      <Form
          name="basic"
          autoComplete="off"
          className={'form'}
          layout={"inline"}
          onFinish={onFinish}
      >
          <Form.Item
              label="所属app"
              name="associateApp"
          >
              <Select
                  allowClear style={{width:"200px"}}
              >
                  <Option value="">全部</Option>
                  <Option value="小黑早教">小黑早教</Option>
                  <Option value="小萌绘本">小萌绘本</Option>
                  <Option value="萌萌乐视频">萌萌乐视频</Option>
              </Select>
          </Form.Item>
          <Form.Item
              label="状态"
              name="couponStatus"
          >
              <Select
                  allowClear style={{width:"200px"}}
              >
                  <Option value="上架">上架</Option>
                  <Option value="下架">下架</Option>
                  <Option value="废弃">废弃</Option>
              </Select>
          </Form.Item>
          <Form.Item
              label="内容名称"
              name="contentName"
              className={style.formItem}
          >
              <Input style={{width:"200px"}}/>
          </Form.Item>
          <Form.Item
              label="有效期"
              className={'formItem'}
          >
              <DatePicker
                  format="YYYY-MM-DD HH:mm:ss"
                  // disabledDate={disabledDate}
                  disabledTime={disabledDateTime}
                  onChange={(moment, string)=>{
                      console.log(string)
                      setValidityTime1(string)
                  }}
                  style={{width:"200px"}}
              />
          </Form.Item>
          <Form.Item
              label="优惠券名称"
              name="couponName"
              className={'formItem'}
          >
              <Input style={{width:"200px"}}/>
          </Form.Item>
          <Form.Item className={'formItem'}>
              <Button type='primary' htmlType="submit" className={style.search}>搜索</Button>
          </Form.Item>
      </Form>
      <div className={style.space}/>
      <Button type='primary' className={style.search} onClick={()=>{addCoupon()}}>新增</Button>
      <Button onClick={()=>{delCoupon()}} type='primary' className={style.search} style={{marginLeft:'10px',borderTop:"1px,solid,#cccccc"}}>删除</Button>
      <br/>
    </div>)
}
export default observer(CouponQuery)